<template>
  <div class="list">
    <div>任务列表</div>
    <div class="lists"  v-for="(item,index) in $store.state.tasklist" :key="index"
     :class="{ liang: item.status==false }"  >
        <div>
            <input @click="handleClick(item)" type="checkbox"  :checked="item.status">
            {{item.id}}、{{item.name}} 
            <span class="delect">删除</span> 
        </div>
        
        </div>
         <div v-show="$store.state.tasklist.length == 0" class="empty">任务列表为空,请添加一个任务!</div>
  </div>
  
</template>

<script>
export default {
    methods: {
        handleClick(item){
            //调用数据仓库中的同步方法changeStatus,修改任务的状态
            this.$store.commit('changeStayus',item);
        }
    },
}
</script>

<style lang="scss" scoped>
.liang{
       background-color: lightcoral;
        }
    .list{
        margin-top: 10px;
        div{
            margin-bottom: 10px;   
        }
        .lists{
                color : lavender;
                width: 100%;
                margin: 10px 0;
                padding: 5px 5px;
                input{
                    float: left;
                    margin-right: 20px;
                }
                .delect{
                    // display: inline-block;
                    float: right;
                    margin-right:20px ;
                }
            }
    }

</style>